<template>
  <view>
    <q-empty
      v-if="!list || !list.length"
      :text="!list ? '加载中...' : '暂无收货地址'"
    ></q-empty>
    <view v-else class="pa-3">
      <view
        class="pa-3 pr-0 bg-cell bdrs-8 mb-3 al-c hover-1"
        v-for="it in list"
        :key="it.id"
        @click="onItem(it)"
      >
        <view class="mr-3" v-show="byPick">
          <span
            class="iconfont fz-22"
            :class="
              it.id == pickAddr.id
                ? 'icon-checked color-1'
                : 'icon-uncheck op-4'
            "
          ></span>
        </view>
        <view class="flex-1">
          <view class="al-c">
            <span>{{ it.area_info.title }} {{ it.detail }}</span>
          </view>
          <view class="op-5 mt-1 fz-14">
            <span>{{ it.name }}</span>
            <span class="ml-3">{{ it.phone }}</span>
          </view>
        </view>

        <view
          class="py-2 px-4 hover-1 u-border-left"
          v-if="byPick"
          @click.stop="onEdit(it)"
        >
          <u-icon name="edit-pen" size="20px"></u-icon>
        </view>
      </view>

      <view class="pa-4 ta-c fz-14">
        <u-loading-icon v-if="loading == 2" />
        <span class="op-4" v-else-if="total > 6"> 共{{ total }}条记录 </span>
      </view>
      <u-safe-bottom />
    </view>

    <view style="padding-top: 64px">
      <u-safe-bottom />
    </view>

    <view class="pos-btm pos-f bg-cell">
      <view class="px-3 py-2">
        <u-button type="primary" @click="onAdd">新增地址</u-button>
      </view>
      <u-safe-bottom />
    </view>
  </view>
</template>

<script>
import mixin from "./list-mixin";
import { mapState } from "vuex";

export default {
  mixins: [mixin],
  data() {
    return {
      listApi: "/data/auth/list/user_addr",
      byPick: false,
    };
  },
  computed: {
    ...mapState(["pickAddr"]),
  },
  onLoad({ act }) {
    this.byPick = act == "pick";
  },
  onShow() {
    this.getList();
  },
  watch: {
    list(val) {
      if (!val.length && this.byPick) {
        this.$redirectTo("user/addr-edit");
      }
    },
  },
  methods: {
    async onItem(it) {
      if (this.byPick) {
        this.$setStore({
          pickAddr: it,
        });
        if (it.id != this.pickAddr.id) {
          await this.$sleep(200);
        }
        this.$navBack();
        return;
      }
      this.onEdit(it);
    },
    onEdit(it) {
      this.$navTo("user/addr-edit?id=" + it.id);
    },
    onAdd() {
      this.$navTo("user/addr-edit");
    },
  },
};
</script>
